.diy_box{
    &>.diy_row{
        margin-bottom:5px;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:wrap;
        .diy_col{
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            position: relative;
            .editSerial{
                position: absolute;
                bottom: 0;
                top:0;
                right:0;
                left:0;
                display: flex;
                display: -webkit-box;
                align-items: center;
                justify-content: center;
                .se{
                    font-size:24px;
                    text-align: center;
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: green;
                    color: white;
                    line-height:30px;
                    opacity: 0.5;
                }
            }
            .tips{
                position: absolute;
                .inner{
                    color:#009fdc;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow:clip;
                }
                i{
                    position: absolute;
                    font-style: normal;
                }

                i.active{
                    color: white;
                    width: 14px;
                    height: 14px;
                    top: 6px;
                    text-indent:-9999px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                    background-image: url(./img/plus.png);
                }
            }
        }
        &.hed{
            .diy_col{
                .tips{
                    text-align: center;
                    bottom: 8px;
                    left:8px;
                    right:8px;
                    height: 24px;
                    .inner{
                        height: 24px;
                        line-height: 24px;
                        font-size:12px;
                        font-weight: 700;
                        width: 100%;
                        display: inline-block;
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: contain;
                        background-image: url(./img/btn_bg.png);
                        text-align: center;
                        b{
                            display: inline-block;
                            position: relative;
                            max-width: 102px;
                            padding-right:16px;
                            i{
                                display: inline-block;
                                right:3px;
                                top:0px;
                            }
                            i.active{
                                top:6px;
                            }

                        }
                    }
                }
            }
        }
        &.bot{
            .diy_col{
                width: 130px;
                height: 87px;
                .tips{
                    text-align: right;
                    top: 50%;
                    height: 20px;
                    margin-bottom: -10px;
                    left:0;
                    right:8px;
                    .inner{
                        height: 20px;
                        line-height: 20px;
                        display: inline-block;
                        color:white;
                        background-color: #009fdc;
                        b{
                            display: inline-block;
                            max-width: 51px;
                            margin-left:5px;
                            font-size:12px;
                            padding-right:15px;
                            i{
                                right: 5px;
                                position: absolute;
                                top: 0;
                            }
                            i.active{
                                text-indent:-9999px;
                                display: inline-block;
                                position: absolute;
                                top: 4px;
                                right: 1px
                            }
                        }
                    }
                }
            }
        }
    }
    .pannel{
        padding-bottom:3px;
        .inner{
            height: 100%;
            position: relative;
            background-color: #545454;
            &:after{
                bottom: 99%;
                border: solid transparent;
                content: "";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                border-color: rgba(136, 183, 213, 0);
                border-bottom-color: #545454;
                border-width: 7px;
            }
            .groups{
                width: 374px;
                margin:0 auto;
                padding-top:5px;
                padding-bottom:5px;
                .group{
                    width: 181px;
                    height: 120px;
                    margin:3px;
                    background-color: white;
                    position: relative;
                    .left{
                        position: absolute;
                        top:4px;
                        left:4px;
                        bottom:0;
                        width: 50%;
                        display: flex;
                        display: -webkit-box;
                        flex-direction:column;
                        justify-content:center;
                        align-content:center;
                        z-index: 1;
                        background-color: transparent;
                        .product{
                            padding-bottom:10px;
                            text-align: center;
                            line-height: 16px;
                            .title{
                                font-size:12px;
                                width: 100%;
                                text-align: center;
                            }
                            .price{
                                color:#f60103;
                                font-weight:700
                            }
                            .try_btn{
                                background-color: #393939;
                                color: #fff;
                                border-radius: 20px;
                                font-size:12px;
                                margin-right: 5px;
                                margin-left: 5px;
                            }
                        }
                    }
                    .right{
                        z-index: 0;
                        position: absolute;
                        top: 4px;
                        right: 4px;
                        bottom: 4px;
                        left: 4px;
                        background-repeat: no-repeat;
                        background-position: center right;
                        background-size: contain;
                        text-align: right;
                        .img{
                            display: inline-block;
                            height: 100%;
                            width: 50%;
                            img{
                                height: 100%;
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        &.p_0{
            .inner{
                &:after{
                    left: 20%;
                }
            }
        }
        &.p_1{
            .inner{
                &:after{
                    left: 50%;
                }
            }
        }
        &.p_2{
            .inner{
                &:after{
                    left: 80%;
                }
            }
        }
    }
}